<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="echarts.min.js"></script>
</head>

<body>
    <div id="top" style="width: 800px;height:400px;"></div>
    <canvas id="bot" style="width:800px;height:200px;"></canvas>

    <script type="text/javascript">

        var topChart = echarts.init(document.getElementById('top'));

        var topOption = {
            animation: false,
            xAxis: {
                type: 'category',
                // data
            },
            yAxis: {
                type: 'value',
                min: 60,
                max: 160,
            },
            toolbox: {
                feature: {
                    // dataZoom: {
                    //     yAxisIndex: false
                    // },
                    brush: {
                        type: ['lineX', 'clear']
                    }
                }
            },
            brush: {
                xAxisIndex: 'all',
                brushLink: 'all',
                outOfBrush: {
                    colorAlpha: 0.8
                }
            },
            series: [{
                type: 'line',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    color: 'blue',
                },
            }]
        };

        var sdata = [
            82, 84, 86, 88, 92, 93, 95, 96, 99, 103,
            110, 103, 106, 104, 112, 114, 115, 120, 129, 133,
            82, 84, 85, 86, 88, 90, 90, 93, 90, 93,
            129, 129, 130, 131, 132, 133, 132, 90, 93, 90,
            93, 94, 95, 95, 98, 99, 103, 106, 107, 110,
            125, 123, 122, 102, 88, 93, 90, 93, 119, 123,
            92, 86, 93, 91, 90, 91, 93, 104, 110, 129,
            133, 133, 132, 120, 108, 93, 82, 93, 91, 90,
            92, 93, 90, 93, 129, 133, 132, 92, 93, 90,
            93, 120, 123, 122, 82, 93, 90, 93, 129, 123,

            90, 93, 90, 93, 129, 123, 122, 92, 93, 90,
            82, 84, 85, 86, 98, 100, 110, 113, 130, 132,
            144, 145, 147, 149, 147, 144, 135, 132, 93, 90,
            93, 94, 95, 95, 98, 99, 103, 106, 107, 110,
            129, 133, 132, 82, 88, 93, 90, 93, 129, 133,
            93, 129, 123, 132, 102, 93, 90, 93, 129, 133,
            89, 89, 93, 91, 90, 91, 93, 104, 110, 129,
            133, 133, 132, 120, 108, 93, 92, 93, 91, 90,
            93, 129, 133, 132, 102, 93, 90, 93, 129, 133,
            82, 84, 86, 88, 92, 93, 95, 96, 99, 103,

            110, 103, 106, 104, 112, 114, 115, 120, 129, 133,
            82, 84, 85, 86, 88, 90, 90, 93, 90, 93,
            129, 129, 130, 131, 132, 133, 132, 90, 93, 90,
            93, 94, 95, 95, 98, 99, 103, 106, 107, 110,
            125, 123, 122, 102, 88, 93, 90, 93, 119, 123,
            92, 86, 93, 91, 90, 91, 93, 104, 110, 129,
            133, 133, 132, 120, 108, 93, 82, 93, 91, 90,
            92, 93, 90, 93, 129, 133, 132, 92, 93, 90,
            93, 120, 123, 122, 82, 93, 90, 93, 129, 123,
            90, 93, 90, 93, 129, 123, 122, 92, 93, 90,

            82, 84, 85, 86, 98, 100, 110, 113, 130, 132,
            144, 145, 147, 149, 147, 144, 135, 132, 93, 90,
            93, 94, 95, 95, 98, 99, 103, 106, 107, 110,
            129, 133, 132, 82, 88, 93, 90, 93, 129, 133,
            93, 129, 123, 132, 102, 93, 90, 93, 129, 133,
            89, 89, 93, 91, 90, 91, 93, 104, 110, 129,
            133, 133, 132, 120, 108, 93, 92, 93, 91, 90,
            93, 129, 133, 132, 102, 93, 90, 93, 129, 133,
            133, 133, 132, 120, 108, 93, 92, 93, 91, 90,
            93, 129, 133, 132, 102, 93, 90, 93, 129, 133
        ];
        topOption.series[0].data = sdata;
        topChart.setOption(topOption);

        topChart.on('brushSelected', function (params) {
            var brushComponent = params.batch[0];
            if (brushComponent.areas.length == 0)
                return;
            console.log(brushComponent.areas[0].coordRange); // 用某种方式输出统计值。
        });



        var MIN = 60;
        var MAX = 160;
        var DEGREE = MAX - MIN;
        var c = document.createElement('canvas')
        var ctx = c.getContext("2d");
        c.width = 400;
        c.height = 200;

        var c2 = document.getElementById("bot");
        var ctx2 = c2.getContext("2d");
        c2.width = 800;
        c2.height = 200;

        var imgData = ctx.createImageData(400, 1);

        var index = 0;
        var t = setInterval(function () {
            //move
            var img = ctx.getImageData(0, 0, 400, 200);
            ctx.putImageData(img, 0, 1);

            //add 1 line
            var tdata = [];
            for (var x = 0; x < 400; x++) {
                tdata.push(Math.floor((1 - Math.random() * 0.05) * sdata[x]));
                for (var i = 0; i < imgData.data.length; i += 4) {
                    imgData.data[i + 0] = 0;
                    imgData.data[i + 1] = 100;
                    imgData.data[i + 2] = 255;
                    imgData.data[i + 3] = Math.floor(255 * tdata[x] / MAX);
                }
                ctx.putImageData(imgData, x, 0);
            }

            //view
            ctx2.canvas.width = 800;
            ctx2.drawImage(ctx.canvas,
                0, 0, 400, 200,
                80, 0, 645, 200
            );

            //echars
            topOption.series[0].data = tdata;
            topChart.setOption(topOption);

            // if (index == 2000) {
            //     clearInterval(t);
            // }
            console.log(index++);
        }, 200);
        

    </script>
</body>

</html>